<ng-container *ngIf="!outlet.isActivated">
    <ts-datepicker #datepickerOne="tsDatepicker" [(ngModel)]="search.params.start" [color]="global.params.color"
        [weekTitles]="['一', '二', '三', '四', '五', '六', '日']" [monthTitles]="['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']">
    </ts-datepicker>
    <ts-datepicker #datepickerTwo="tsDatepicker" [(ngModel)]="search.params.end" [color]="global.params.color"
        [weekTitles]="['一', '二', '三', '四', '五', '六', '日']" [monthTitles]="['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']">
    </ts-datepicker>
    <div class="toolbar">
        <!-- <h4>企业用户</h4> -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">供应商</span>
            </div>
            <input [(ngModel)]="search.params.name" type="text" class="form-control" placeholder="请输入供应商关键词">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">商品类别</span>
            </div>
            <div class="col-sm-4 px-0">
                <select [(ngModel)]="goods.goodsParentType" class="custom-select b-t-l-radius b-b-l-radius" placeholder="请选择一级分类">
                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                </select>
            </div>
            <div class="col-sm-7"></div>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">合同日期</span>
            </div>
            <input tsToggle [bind]="datepickerOne" [target]="datepickerOne" type="text" [value]="search.params.start"
                class="form-control bg-white pointer" placeholder="开始时间" readonly>
            <div class="input-group-prepend input-group-append">
                <span class="input-group-text bg-white">到</span>
            </div>
            <input tsToggle [bind]="datepickerTwo" [target]="datepickerTwo" type="text" [value]="search.params.end"
                class="form-control bg-white pointer" placeholder="结束时间" readonly>
        </div>
        <div class="row">
            <div class="col-12 text-right m-btn">
                <button class="btn btn-success" routerLink="detail">
                    <span>新增</span>
                </button>
                <button class="btn btn-primary"  routerLink="detail">
                    <span>导出</span>
                </button>
                <button (click)="doReset()" class="btn btn-white">
                    <i class="iconfont icon-refresh mr-2"></i>
                    <span>重置</span>
                </button>
                <button (click)="doSearch()" class="btn btn-white">
                    <i class="iconfont icon-search mr-2"></i>
                    <span>查询</span>
                </button>
            </div>
        </div>
    </div>
    <div tsTab tab='商品明细' class="card rounded-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr class="font-weight-bold bg-light">
                        <td *ngFor="let th of theads" >{{th}}</td>
                    </tr>
                    <tr *ngFor="let item of list;index as i" (click)= "loadDetailDatas(item.id)"  [class]="item.isSelect?'bg-detail-active':''">
                        <td>{{i+1}}</td>
                        <td>{{item.contractNumber}}</td>
                        <td>{{item.customerId}}</td>
                        <td>{{item.tallyClerkId}}</td>
                        <td>{{item.reportManId}}</td>
                        <td>{{item.status}}</td>
                        <td>{{item.createdAt}}</td>
                        <td>{{item.startTime}}</td>
                        <td>{{item.endTime}}</td>
                        <td>{{item.updatedAt}}</td>
                        <td>{{item.repaymentPeriod}}</td>
                        <td>{{item.companyTitle}}</td>
                        <td>{{item.paymentDate}}</td>
                        <td>{{item.ticketOpeningDate}}</td>
                        <td>{{item.paymentDate}}</td>
                        <td>{{item.creditLine}}</td>
                        <td>{{item.usedCredit}}</td>
                        <td>{{item.availableCredit}}</td>
                        <td>
                            <div class="col-sm-10 pt-2">
                                <ts-switch [color]="global.params.color" [values]="{open:1,close:0}"
                                    [(ngModel)]="goods.isActive"></ts-switch>
                            </div>
                        </td>
                        <td>
                            <div tsDropdown>
                                <span tsToggle class="btn-icon btn-icon-success">
                                    <i tsIcon="gengduo"></i>
                                </span>
                                <div tsDropMenu [offsetX]="-57">
                                    <button class="dropdown-item pointer" routerLink="detail">修改</button>
                                    <button class="dropdown-item pointer">删除</button>
                                    <button class="dropdown-item pointer">审核</button>
                                    <button class="dropdown-item pointer">复制合同</button>
                                </div>
                            </div>
                        </td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        <div class="text-right">
            <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页"
                endTitle="末尾" outline></ts-pagination>
        </div>
    </div>
    <div #tsTabs='tsTabs' tsTabs class="p-2">
        <div class="pl-3 pr-3 bg-white">
            <ts-tabs [tabs]="['商品明细','合同条款','费用明细']" [color]="global.params.color" [target]="tsTabs" activeTab="商品明细">
            </ts-tabs>
        </div>
        <div tsTab tab='商品明细' class="card rounded-0">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <tbody>
                            <tr class="font-weight-bold bg-light">
                                <td style="min-width:120px" *ngFor="let th of thead">{{th}}</td>
                            </tr>
                            <tr *ngFor="let th of detailList;index as i">
                                <td>{{i + 1}}</td>
                                <td>{{th.goodsNumber}}</td>
                                <td>{{th.goodsName}}</td>
                                <td>{{th.barCode}}</td>
                                <td>{{th.otherNumber}}</td>
                                <td>?</td>
                                <td>{{th.unit}}</td>
                                <td>{{th.flavorColor}}</td>
                                <td>{{th.specificationsDimensions}}</td>
                                <td>?</td>
                                <td>{{th.taxIncludedPrice}}</td>
                                <td>{{th.notTaxIncludedPrice}}</td>
                                <td>{{th.isBox}}</td>
                                <td>{{th.freshDays}}</td>
                                <td>{{th.brandId}}</td>
                                <td>?</td>
                                <td>?</td>
                                <td>{{th.mnemonicSymbol}}</td>
                                <td>{{th.minimumPrice}}</td>
                                <td>{{th.retailPrice}}</td>
                                <td>{{th.minimumShipmentBase}}</td>
                                <td>
                                    <div tsDropdown>
                                        <span tsToggle class="btn-icon btn-icon-success">
                                            <i tsIcon="gengduo"></i>
                                        </span>
                                        <div tsDropMenu [offsetX]="-57">
                                            <button class="dropdown-item pointer" routerLink="detail">修改</button>
                                            <button class="dropdown-item pointer" (click)="confirmDelete(id)">删除</button>
                                            <button class="dropdown-item pointer">审核</button>
                                            <button class="dropdown-item pointer">复制合同</button>
                                        </div>
                                    </div>
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-right">
                    <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                        [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页"
                        endTitle="末尾" outline></ts-pagination>
                </div>
            </div>
        </div>
        <div tsTab tab='合同条款' class="card rounded-0">
          
        </div>
        <div tsTab tab='费用明细' class="card rounded-0">
          
            </div>

    </div>
</ng-container>
<router-outlet #outlet="outlet"></router-outlet>